<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="活动名称:">
            <span>{{ dataInfo.activityName }}</span>
          </el-form-item>

          <el-form-item label="活动主图:">
            <el-image
              style="width: 150px;"
              title="点击可预览"
              :src="dataInfo.mainImage"
              alt=""
              :preview-src-list="[dataInfo.mainImage]"
            ></el-image>
          </el-form-item>
          <el-form-item label="活动类型:">
            <span>{{ dataInfo.activityType == 1 ? "产品" : "通知" }}</span>
          </el-form-item>
          <el-form-item label="购买方式:">
            <span>{{ formatBuyWay(dataInfo.buyWay) }}</span>
          </el-form-item>
          <el-form-item label="分类名:">
            <span>{{ dataInfo.firstClassifyName }}</span>
            <span v-if="dataInfo.secondClassifyName"
              >- {{ dataInfo.secondClassifyName }}</span
            >
            <span v-if="dataInfo.thirdClassifyName"
              >- {{ dataInfo.thirdClassifyName }}</span
            >
          </el-form-item>
          <el-form-item label="主按钮名称">
            <span>{{ dataInfo.mainBtnName }}</span>
          </el-form-item>
          <el-form-item label="地址:">
            <span>{{ dataInfo.provinceName }}</span>
            <span v-if="dataInfo.cityName">- {{ dataInfo.cityName }}</span>
            <span v-if="dataInfo.areaName">- {{ dataInfo.areaName }}</span>
            <span v-if="dataInfo.villageName">- {{ dataInfo.villageName }}</span>
          </el-form-item>
          <el-form-item label="活动展示时间:">
            <span>{{
              dataInfo.showBeginDate + " 到 " + dataInfo.showEndDate
            }}</span>
          </el-form-item>

          <el-form-item label="关键字:">
            <span>{{ dataInfo.keywords }}</span>
          </el-form-item>

          <el-form-item label="活动简介:">
            <span>{{ dataInfo.introduce }}</span>
          </el-form-item>
          <el-form-item label="排序:">
            <span>{{ dataInfo.sort }}</span>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="tit">
        <h2>货品描述</h2>
      </div>
      <RichEditor :readonly="true" :richText="dataInfo.content"></RichEditor>

      <div class="tit">
        <h2>按钮</h2>
      </div>
      <el-table :data="dataInfo.list" style="width: 1000px;">
        <el-table-column type="index" label="序号" align="center" width="120">
        </el-table-column>
        <el-table-column
          prop="btnName"
          label="按钮名称"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column label="活动可购买时间" align="center">
          <template slot-scope="{ row }">
            <div>
              {{ row.buyBeginDate + "" + row.buyEndDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="serverCode"
          label="货品编号"
          align="center"
          v-if="dataInfo.activityType == 1"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import RichEditor from "../../components/RichEditor.vue";
import activityApi from "../../api/operation/activity";

export default {
  data() {
    return {
      dataInfo: {},
    };
  },
  components: {
    RichEditor
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      activityApi.getActivity({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data;
      });
    },
    formatBuyWay(type) {
      switch (type) {
        case 11:
          return "快捷支付下单";
        case 12:
          return "补差价支付下单";
        case 13:
          return "详情页下单";
        case 14:
          return "结算页下单";
      }
    },
    formatTimeUnit2(cell) {
      if (cell == 1) {
        return "分钟";
      } else if (cell == 2) {
        return "时";
      } else {
        return "";
      }
    },
    formatTimeUnit(val) {
      if (val == 1) return "分钟";
      if (val == 2) return "小时";
      if (val == 3) return "天";
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({
        path: "/operation/activityManagement"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
.business-classify_name {
  ::v-deep p {
    display: inline;
    margin: 0;
    img {
      vertical-align: middle;
      height: 16px;
      width: auto;
    }
  }
}
</style>
